import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import merge from 'lodash.merge';
import clonedeep from 'lodash.clonedeep';

class RadarChart extends Component {
  defaultSeries = {
    // 普通线条
    deepBlue: {
      name: '正面维度',
      type: 'radar',
      tooltip: {
        trigger: 'item',
      },
      // axisName: {
      //   color: '#fff'
      // },
      symbol: 'none',
      lineStyle: {
        width: '3',
        color: 'rgba(49, 237, 249, 1)',
      },
      areaStyle: {
        color: 'rgba(49, 237, 249, 0.2)',
      },
      data: [
        // {
        //   value: [60, 73, 85, 40, 60, 73, 85, 40, 50]
        // }
      ],
    },
    lightBlue: {
      name: '行业平均',
      type: 'radar',
      tooltip: {
        trigger: 'item',
      },
      // axisName: {
      //   color: '#fff'
      // },
      symbol: 'none',
      lineStyle: {
        width: '3',
        color: 'rgba(245, 213, 10, 1)',
      },
      areaStyle: {
        color: 'rgba(245, 213, 10, 0.2)',
      },
      data: [
        // {
        //   value: [30, 29, 40, 20, 30, 33, 45, 20, 25]
        // }
      ],
    },
  };
  defaultOption = {
    normal: {
      color: ['rgba(49, 237, 249, 1)', 'rgba(245, 213, 10, 1)'],
      legend: {
        textStyle: {
          color: 'rgb(255, 255, 255)',
        },
        top: 10,
        left: 'center',
        itemWidth: 12,
        itemHeight: 6,
        icon: 'rect',
        data: [],
      },
      radar: [
        {
          axisName: {
            color: '#fff',
          },
          indicator: [
            // { text: '景区管理', max: 100 },
            // { text: '旅游交通', max: 100 },
            // { text: '公共设施', max: 100 },
            // { text: '卫生环境', max: 100 },
            // { text: '门票物价', max: 100 },
            // { text: '服务质量', max: 100 },
            // { text: '文化特色', max: 100 },
            // { text: '景区景色', max: 100 },
            // { text: '客流状态', max: 100 }
          ],
          radius: 50,
          // shape: 'circle',
          splitNumber: 4,
          center: ['50%', '50%'],
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#565656'],
              type: 'dotted',
            },
          },
          axisLine: {
            lineStyle: {
              color: ['#888'],
            },
          },
        },
      ],
      series: [
        // {
        //   name: '正面维度',
        //   type: 'radar',
        //   tooltip: {
        //     trigger: 'item'
        //   },
        //   symbol: 'none',
        //   lineStyle: {
        //     width: '0.5',
        //     color: 'rgba(0, 145, 255, 1)'
        //   },
        //   areaStyle: {
        //     color: 'rgba(0, 145, 255, 0.2)'
        //   },
        //   data: [
        //     {
        //       value: [60, 73, 85, 40, 60, 73, 85, 40, 50]
        //     }
        //   ]
        // },
        // {
        //   name: '行业平均',
        //   type: 'radar',
        //   tooltip: {
        //     trigger: 'item'
        //   },
        //   symbol: 'none',
        //   lineStyle: {
        //     width: '0.5',
        //     color: 'rgba(50, 197, 255, 1)'
        //   },
        //   areaStyle: {
        //     color: 'rgba(50, 197, 255, 0.2)'
        //   },
        //   data: [
        //     {
        //       value: [30, 29, 40, 20, 30, 33, 45, 20, 25]
        //     }
        //   ]
        // }
      ],
    },
  };
  state = {};
  mergeOption = (option = {}) => {
    const newOption = merge(
      this.defaultOption[option.styleType || 'normal'],
      option,
    );
    return newOption;
  };

  mergeSerie = (serie = {}) => {
    const newSerie = merge(
      this.defaultSeries[serie.styleType || 'deepBlue'],
      serie,
    );
    return newSerie;
  };

  chartOptionMerge = () => {
    const propsOption = this.props.option || {};
    const { indicator = [] } = this.props;
    if (propsOption.series && propsOption.series.length) {
      propsOption.series = propsOption.series.map((item) => {
        item = this.mergeSerie(item);
        return item;
      });
    }
    const option = this.mergeOption(propsOption);
    option.radar[0].indicator = indicator;
    return option;
  };

  render() {
    const option = clonedeep(this.chartOptionMerge());
    // const option = {};
    return (
      // <div></div>
      <ReactEcharts
        echarts={echarts}
        {...this.props}
        option={option}
      ></ReactEcharts>
    );
  }
}

export default RadarChart;
